在 src/components 目录下创建一个新的组件文件 DocumentViewer.vue，并添加以下内容：

<template>
  <div class="document-container" direction="vertical" alignment="flex-start">
    <div class="document-header">
      <h1>solo π快速使用流程</h1>
      <div></div>
      <p class="author">陈蔓</p>
      <p class="date">2024/08/23</p>
    </div>
    <div class="document-body">
      <h4>步骤一：创建项目</h4>
      <p>
        创建项目 -> 快速创建 -> 输入项目名称和创建人名称，上传脚本压缩包（注意脚本规范） -> 鼠标点击【立即创建】。
      </p>
      <img src="@/assets/helpfile/图片1.png" alt="图1" class="document-image" slot=error />
      <h4>步骤二：检查脚本</h4>
      <p>
        项目管理 -> 脚本管理 -> 选择自己的项目 - > 选择所有脚本 -> 鼠标点击【脚本检查】 -> 查看输出日志，确保所有脚本符合规范。
      </p>
      <img src="@/assets/helpfile/图片2.png" alt="图1" class="document-image" slot=error />
      <h4>步骤三：配置测试策略</h4>
      <p>
        项目管理 -> 脚本管理 -> 选择自己的项目 - > 测试策略 -> 点击编辑按钮，根据实际情况设置测试策略
      </p>
      <img src="@/assets/helpfile/图片3.png" alt="图1" class="document-image" slot=error />
      <h4>步骤四（可选）：配置邮件信息</h4>
      <p>
        项目管理 -> 脚本管理 -> 选择自己的项目 - > 邮件配置 -> 设置邮件信息 -> 鼠标点击【保存】。
      </p>
      <img src="@/assets/helpfile/图片4.png" alt="图1" class="document-image" slot=error />
      <h4>步骤五：添加负载机</h4>
      <p>
        负载机管理 -> 负载机管理 -> 鼠标点击【新增负载机】-> 输入负载机IP、用户名、密码，点击【测试链接】 ，成功连接后关闭窗口 -> 新添加的负载机的状态点击【启用】按钮 -> 点击【初始化】 ->
        初始化成功后点击【启动】-> 启动成功后，点击【检查】，再次确认负载机已成功启动。
      </p>
      <img src="@/assets/helpfile/图片5.png" alt="图1" class="document-image" slot=error />
      <h4>步骤六：执行测试</h4>
      <p>
        项目管理 -> 执行测试 -> 选择自己的项目 -> 选择测试机，选择刚刚添加的负载机 -> 选择是否开启资源监控（可选，需要确保脚本符合规范）-> 点击【执行测试】。
      </p>
      <img src="@/assets/helpfile/图片6.png" alt="图1" class="document-image" slot=error />
      <h4>步骤七：查看报告</h4>
      <p>
        项目管理 -> 查看报告 -> 选择项目，点击【查询报告】。
      </p>
      <img src="@/assets/helpfile/图片7.png" alt="图" class="document-image" slot=error />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DocumentViewer'
}
</script>

<style scoped>
.document-container {

  margin: 0 auto;
  font-family: 'Arial', sans-serif;
  background-color: #ffffff;
  /* 纯白色背景 */
  padding: 20px;
  /* 为容器添加一些内边距 */
}

.document-header {
  text-align: center;
  margin-bottom: 20px;
}

.document-header h1 {
  font-size: 2em;
}

.document-header .author,
.document-header .date {
  font-size: 1em;
  color: #555;
}

.document-body {
  line-height: 1.6;
}

.document-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

h2 {
  margin-top: 30px;
}

ul {
  list-style-type: disc;
  margin-left: 20px;
}
</style>
